<template>
    <div class="register">
        <!-- 顶部导航区域 -->
        <nav-comp :back="true" title="欢迎注册会员"></nav-comp>
        <gap-comp :height="3"></gap-comp>
        <van-form @submit="register">
            <van-field v-model="info.phone" name="phone" label="手机号" placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]" />
            <van-field v-model="info.nickname" name="nickname" label="昵称" placeholder="昵称"
                :rules="[{ required: true, message: '请填写用户昵称' }]" />
            <van-field v-model="info.password" type="password" name="password" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <div style="margin: 16px;">
                <van-button round block type="info" color="#FF6040" native-type="submit">点击注册</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {
                phone: "",
                nickname: "",
                password: ""
            }
        };
    },
    methods: {
        register(info) {
            // 1.获取注册数据
            console.log(info)
            // 2.验证注册数据
            // 3.提交注册信息
            this.$api.reqRegister(info)
                .then(res => {
                    // 提示注册成功
                    this.$notify({
                        type: 'success',
                        message: '注册成功，请登录！'
                    });
                    // 跳转到登录页面
                    this.$router.push('/formlogin')
                })
                .catch(err => console.log(err))

        }
    },
};
</script>

<style scoped>
.register {
    font-size: .3rem;
}
</style>
